<template>
  <div class="base-tips" v-show="showTip" @click.stop="test">
    <div class="tips-title">
      <span v-for="m in titleData" :key="m.type" @click="changeTitle(m.type)" :class="{'title-actived': titleType === m.type}">{{m.title}}({{listData.filter(item => item.type === m.type).length}})</span>
    </div>
    <div class="tips-lists">
      <template v-for="m in listData">
        <div class="list-data" :key="m.id" v-if="m.type === 1" v-show="titleType === 1">
          <span>
            <span>{{m.title}}</span>
            <el-tag size="mini" v-if="m.workType === 1" type="info">{{m.worktitle}}</el-tag>
            <el-tag size="mini" v-if="m.workType === 2" type="warning">{{m.worktitle}}</el-tag>
            <el-tag size="mini" v-if="m.workType === 3" type="danger">{{m.worktitle}}</el-tag>
            <el-tag size="mini" v-if="m.workType === 4" type="success">{{m.worktitle}}</el-tag>
          </span>
          <span>
            <span>{{m.remark}}</span>
          </span>
        </div>
        <div class="list-data" :key="m.id" v-if="m.type === 2" v-show="titleType === 2">
          <img :src="m.url">
          <span>
            <span>{{m.title}}</span>
            <span>{{m.remark}}</span>
          </span>
        </div>
        <div class="list-data" :key="m.id" v-if="m.type === 3" v-show="titleType === 3">
          <img :src="m.url">
          <span>
            <span>{{m.title}}</span>
            <span>{{m.remark}}</span>
          </span>
        </div>
      </template>
    </div>
    <div class="list-btn">
      <span v-if="titleType === 2">清空通知</span>
      <span v-if="titleType === 3">清空消息</span>
      <span>查看更多</span>
    </div>
  </div>
</template>
<script>
export default {
  computed: {
    showTip() {
      return this.$store.state.showTip
    }
  },
  data() {
    return {
      listData: [
        {
          id: 0,
          type: 1,
          title: '任务1',
          worktitle: '未开始',
          workType: 1,
          remark: '此任务需要在2019-04-01开始'
        },
        {
          id: 21,
          type: 2,
          title: '你收到勒2019.03月报',
          url: require('../../deps/public/userImg.png'),
          remark: '2019-04-01'
        },
        {
          id: 31,
          type: 3,
          title: '王大陆 给你发起计划任务XXXXXXXX',
          url: require('../../deps/public/userImg.png'),
          remark: '2019-04-01'
        },
        {
          id: 1,
          type: 1,
          title: '任务2',
          worktitle: '马上到期',
          workType: 2,
          remark: '此任务需要在2019-04-01开始'
        },
        {
          id: 2,
          type: 1,
          title: '任务3',
          worktitle: '已超期8天',
          workType: 3,
          remark: '此任务需要在2019-04-01开始'
        },
        {
          id: 3,
          type: 1,
          title: '任务4',
          worktitle: '进行中',
          workType: 4,
          remark: '此任务需要在2019-04-01开始'
        }
      ],
      titleData: [
        {type: 1, title: '待办', mes: 5},
        {type: 2, title: '通知', mes: 3},
        {type: 3, title: '消息', mes: 2}
      ],
      titleType: 1
    }
  },
  methods: {
    test() {},
    changeTitle(type) {
      if (this.titleType === type) return
      this.titleType = type
    }
  },
  mounted() {
  }
}
</script>
<style lang="scss">
.base-tips {
  position: absolute;
  right: 0;
  top: 70px;
  width: 336px;
  background: #ffffff;
  box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.08), 0px 0px 12px 0px rgba(0,0,0,0.08);
  border-radius: 4px;
  z-index: 99;

  .tips-lists {
    .list-data {
      padding: 20px 0;
      border-bottom: 1px solid #f5f5f5;
    }
  }

  .tips-title, .list-btn {
    display: table;
    width: 100%;
    border-bottom: 1px solid #f5f5f5;
    
    span {
      display: table-cell;
      padding: 10px 0;
      
      &:hover {
        color: rgba(51,184,162,1);
      }
    }
    
    .title-actived {
      color: rgba(51,184,162,1);
      border-bottom: 2px solid rgba(51,184,162,1);
    }
  }

  .list-btn {
    span {
      border-right: 1px solid #f5f5f5;
    }
  }
}
</style>